<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涂鸦板</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1>简易涂鸦板</h1>
        <div class="tools">
            <div class="tool-section">
                <h3>绘图工具</h3>
                <div class="tool-group">
                    <button id="pencil" class="tool-btn active" title="铅笔"><i class="fas fa-pencil-alt"></i></button>
                    <button id="eraser" class="tool-btn" title="橡皮擦"><i class="fas fa-eraser"></i></button>
                    <button id="text" class="tool-btn" title="文字"><i class="fas fa-font"></i></button>
                </div>
            </div>
            
            <div class="tool-section">
                <h3>形状</h3>
                <div class="tool-group">
                    <button id="rect" class="tool-btn" title="矩形"><i class="far fa-square"></i></button>
                    <button id="circle" class="tool-btn" title="圆形"><i class="far fa-circle"></i></button>
                    <button id="line" class="tool-btn" title="直线"><i class="fas fa-slash"></i></button>
                    <button id="triangle" class="tool-btn" title="三角形"><i class="fas fa-play"></i></button>
                </div>
            </div>
            
            <div class="tool-section">
                <h3>颜色</h3>
                <div class="tool-group">
                    <input type="color" id="color" value="#000000" title="选择颜色">
                    <div class="color-presets">
                        <div class="color-preset" style="background-color: #000000" data-color="#000000"></div>
                        <div class="color-preset" style="background-color: #ff0000" data-color="#ff0000"></div>
                        <div class="color-preset" style="background-color: #00ff00" data-color="#00ff00"></div>
                        <div class="color-preset" style="background-color: #0000ff" data-color="#0000ff"></div>
                        <div class="color-preset" style="background-color: #ffff00" data-color="#ffff00"></div>
                    </div>
                </div>
            </div>
            
            <div class="tool-section">
                <h3>线条</h3>
                <div class="tool-group">
                    <label for="lineWidth">粗细:</label>
                    <input type="range" id="lineWidth" min="1" max="50" value="5">
                    <span id="lineWidthValue">5</span>px
                </div>
            </div>
            
            <div class="tool-section">
                <h3>文字选项</h3>
                <div class="tool-group">
                    <select id="fontFamily">
                        <option value="Arial">Arial</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="宋体">宋体</option>
                        <option value="黑体">黑体</option>
                    </select>
                    <select id="fontSize">
                        <option value="12">12px</option>
                        <option value="16">16px</option>
                        <option value="20" selected>20px</option>
                        <option value="24">24px</option>
                        <option value="32">32px</option>
                        <option value="48">48px</option>
                    </select>
                </div>
            </div>
            
            <div class="tool-section">
                <h3>操作</h3>
                <div class="tool-group">
                    <button id="clear" class="action-btn"><i class="fas fa-trash-alt"></i> 清除画布</button>
                    <button id="save" class="action-btn"><i class="fas fa-download"></i> 保存图片</button>
                    <button id="undo" class="action-btn" disabled><i class="fas fa-undo"></i> 撤销</button>
                </div>
            </div>
        </div>
        
        <div class="canvas-container">
            <canvas id="canvas"></canvas>
            <div id="text-input-container" style="display: none;">
                <textarea id="text-input" placeholder="输入文字..."></textarea>
                <button id="text-submit">确定</button>
                <button id="text-cancel">取消</button>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 简易涂鸦板 | <a href="https://opensource.org/licenses/MIT" target="_blank">MIT许可证</a></p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html> 